<script setup lang="ts">
import { defineProps, onMounted } from 'vue'

const props = defineProps({
	type: String,
})

onMounted(() => {
	console.log(props.type);
	
});
const openView = ()=>{
	console.log('打开视频详情')
}
const like = ()=>{
	console.log('喜欢')
}

// 初始化时检测系统主题
checkSystemTheme();

// 添加媒体查询监听器
window.matchMedia('(prefers-color-scheme: dark)').addListener(checkSystemTheme);

function checkSystemTheme() {

}
</script>

<template>
	<div class="message-item message-item-1" @click="openView">
		<div class="top">
			<div class="time">2002-11-22</div>
			<div class="type">留言</div>
		</div>
		<div class="content">222</div>
		<div class="bottom">
			<div class="left">
				<div @click.stop="like"><t-icon name="heart" />heart-filled</div>
				<div style="margin-left: 10px;"><t-icon name="chat-message" /></div>
			</div>
			<div class="name">你好</div>
		</div>
	</div>
</template>

<style scoped lang="less">
.transparent-background(@color, @alpha: 1) {
	background-color: rgba(@color, @alpha);
}
.message-item {
	width: 290px;
	height: 240px;
	cursor: pointer;
	transition: transform 0.6s ease;
	color: var(--hj-font-color);
	.transparent-background(red,0.4);
	padding: 20px;
	box-sizing: border-box;
  margin-bottom: 40px;
	&:hover {
		transform: translateY(-10px);
	}
	&:active {
		border: 1px solid #0d429a;
	}
}


.top{
	color: #949494;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.content{
	font-size: 16px;
	width: 100%;
	height: 140px;
	margin-top:10px ;
	margin-bottom: 10px;
}
.bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
	.name{
		font-weight: 600;
		font-size: 17px;
	}
	.left{
		display: flex;
    color: #949494;
	}
}

</style>
